<template>
  <div class="app-container">
    <span class="title">账户信息</span>
    <el-divider />
    <table style="width: 100%; ">
      <tr style="height: 30px;">
        <!--        <td class="td-lable">用户名:</td>-->
        <!--        <td class="td-value">{{ systemInfoAndUserInfo.username }}</td>-->
        <td class="td-lable">姓名:</td>
        <td class="td-value">{{ systemInfoAndUserInfo.name }}</td>
        <td class="td-lable">手机:</td>
        <td class="td-value">{{ systemInfoAndUserInfo.phone }}</td>
      </tr>
      <!--      <tr style="height: 30px;">-->
      <!--        <td class="td-lable">手机:</td>-->
      <!--        <td class="td-value">{{ systemInfoAndUserInfo.phone }} <el-button type="text" @click="phoneForm.dialogFormVisible = true">修改</el-button></td>-->
      <!--&lt;!&ndash;        <td class="td-lable">密码:</td>&ndash;&gt;-->
      <!--&lt;!&ndash;        <td class="td-value">{{ // systemInfoAndUserInfo.password }} <el-button type="text" @click="passwordForm.formDialog = true">修改</el-button></td>&ndash;&gt;-->
      <!--      </tr>-->
      <tr style="height: 30px;">
        <td class="td-lable">机构:</td>
        <td class="td-value">{{ systemInfoAndUserInfo.deptName }}</td>
        <!--              <td class="td-lable">职位:</td>-->
        <!--              <td class="td-value">{{ systemInfoAndUserInfo.jobName }}</td>-->
      </tr>
      <!--      <tr style="height: 30px;">-->
      <!--        <td class="td-lable">开通时间:</td>-->
      <!--        <td class="td-value">{{ systemInfoAndUserInfo.createTime }}</td>-->
      <!--      </tr>-->
    </table>
    <div style="margin-top: 30px;">
      <span class="title">系统信息</span>
      <el-divider />
      <table style="width: 100%; ">
        <tr style="height: 30px;">
          <td class="td-lable">版本号:</td>
          <td class="td-value">{{ systemInfoAndUserInfo.version }}</td>
          <td class="td-lable">更新时间:</td>
          <td class="td-value">{{ systemInfoAndUserInfo.updateTime }}</td>
        </tr>
        <tr style="height: 30px;">
          <td class="td-lable">更新内容:</td>
          <td class="td-value">{{ systemInfoAndUserInfo.contex }}</td>
        </tr>
      </table>
    </div>
    <div style="margin-top: 30px;">
      <span class="title">系统使用指引</span>
      <el-divider />
      <div style="display: flex; height: 400px;">
        <div style="width: 50%; height: 100%;text-align: center">
          <video v-if="systemInfoAndUserInfo && systemInfoAndUserInfo.videoUrl" controls width="700px">
            <source :src="systemInfoAndUserInfo.videoUrl" type="video/mp4">
          </video>
        </div>
        <div style="text-align: left; width: 50%; height: 100%;">
          <div style="height: 15%; display: flex;">
            <div style="width:10%;margin-top: 10px;text-align: right;" class="gongdantitle">工单流程:</div>
            <div style="width: 90%;margin-top: 10px; margin-right: 10px;margin-left: 10px" class="gongdantitle">
              <span>产生业务告警产生-->生成告警工单-->告警工单派发给相关人员-->处理告警工单-->管理员审批告警工单处理情况-->告警工单完成。</span>
            </div>
          </div>
          <div style="height: 15%; display: flex;">
            <div style="width:10%;margin-top: 10px;text-align: right;" class="gongdantitle">超级管理员:</div>
            <div style="width: 90%;margin-top: 10px; margin-right: 10px;margin-left: 10px;" class="gongdantitle">
              <span>超级管理员可对人员进行管理和查看工单进展情况，不具备工单管理功能，只有合肥超级管理员具备人员录入删除功能，其他层级管理员不具备人员管理功能，超级管理员对普通管理员工单管理能力范围进行分配，通过组织机构树进行勾选分配。</span>
            </div>
          </div>
          <div style="height: 15%; display: flex;">
            <div style="width:10%;margin-top: 10px;text-align: right;" class="gongdantitle">管理员:</div>
            <div style="width: 90%;margin-top: 10px; margin-right: 10px;margin-left: 10px" class="gongdantitle">
              <span>管理员不具备人员管理能力，具备各机构工单管理能力，可查看、审批工单。</span>
            </div>
          </div>
          <div style="height: 15%; display: flex;">
            <div style="width:10%;margin-top: 10px;text-align: right;" class="gongdantitle">普通用户:</div>
            <div style="width: 90%;margin-top: 10px; margin-right: 10px;margin-left: 10px;" class="gongdantitle">
              <span>可接工单，查看工单、处理工单</span>
            </div>
          </div>
          <div style="height: 15%; display: flex;">
            <div style="width:10%;margin-top: 10px;text-align: right;" class="gongdantitle">账号密码:</div>
            <div style="width: 90%;margin-top: 10px; margin-right: 10px;margin-left: 10px;" class="gongdantitle">
              <span>每个账号可支持自己独立修改账号密码，修改完成后需使用新账号密码重新进行系统登录，请牢记账号密码。</span>
            </div>
          </div>
        </div>
      </div>
      <div>
        <span class="title">告警规则</span>
        <el-divider />
        <div style="display: flex; height: 1200px;">
          <div style="text-align: left; width: 100%; height: 100%;">
            <el-table
              border
              :data="tableData"
              :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}"
              style="width: 100%"
            >
              <el-table-column
                prop="type"
                label="告警类型"
                width="180"
              />
              <el-table-column
                prop="logic"
                label="告警逻辑"
                width="880"
              />
              <el-table-column
                prop="description"
                label="场站告警说明"
              />
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <div>
      <el-dialog title="修改密码" :visible.sync="passwordForm.formDialog" :close-on-click-modal="false" width="40%">
        <el-form ref="passwordForm" :model="passwordForm.props" :rules="passwordForm.rules" label-width="120px">
          <el-form-item label="旧密码" prop="oldPassword">
            <el-input v-model="passwordForm.props.oldPassword" show-password placeholder="请输入旧密码" :clearable="true" />
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
            <el-input v-model="passwordForm.props.newPassword" show-password placeholder="请输入新密码" :clearable="true" />
          </el-form-item>
          <el-form-item label="再次输入新密码" prop="newPasswordTwo">
            <el-input v-model="passwordForm.props.newPasswordTwo" show-password placeholder="请再次输入新密码" :clearable="true" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="passwordForm.formDialog = false">取 消</el-button>
          <el-button type="primary" :disabled="btnSubmitDisabled" @click="save">确定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="手机号修改" :visible.sync="phoneForm.dialogFormVisible">
        <el-form ref="phoneForm" :model="phoneForm.props" :rules="phoneForm.rules" label-width="120px">
          <el-form-item label="新手机号" prop="phone">
            <el-input v-model="phoneForm.props.phone" placeholder="请输入手机号" :clearable="true" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="phoneForm.dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="savePhone">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
import encUtil from '@/utils/commonUtils'

export default {
  name: 'AccountSettings',
  components: {
    // eslint-disable-next-line vue/no-unused-components
    encUtil
  },
  data() {
    const passwordRule = (rule, value, callback) => {
      const regExp = /^(?![0-9]+$)(?![a-zA-Z]+$)(?![`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、\$\^]+$)[0-9A-Za-z`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、\$\^]{8,16}$/;
      if (!regExp.test(value)) {
        callback(new Error('密码由数字、字母、特殊字符组成，且长度要在8-16位之间。'));
      } else {
        callback();
      }
    };
    return {
      systemInfoAndUserInfo: {
        username: '',
        name: '',
        password: '',
        phone: '',
        deptName: '',
        createTime: '',
        version: '',
        updateTime: '',
        contex: '',
        videoUrl: '',
        initiate: '',
        reminder: '',
        userManagement: ''
      },
      tableData: [{
        type: '越界识别（翻墙）',
        logic: '在监控画面中绘制出围墙顶端区域，当区域内有人体出现，并在一定时间内一直存在，则进行告警。支持配置延迟告警时间，建议值1s',
        description: ''
      }, {
        type: '槽车防滑垫识别',
        logic: '在监控画面内绘制分析区域，区域内检测到槽车目标时，同时检测槽车后轮，当槽车后轮没有放置防滑垫,并在一定时间内（一般为停车10分钟后）均未放置，则进行告警。支持配置延迟告警时间，建议值30s',
        description: 'LNG/CNG车辆进行装卸作业，在车辆停稳10分钟内需放置槽车防滑垫'
      }, {
        type: '槽车警示牌识别',
        logic: '在监控画面内绘制分析区域，区域内检测到槽车目标时，同时检测区域内是否有警示牌，如果在一定时间内均未放置警示牌，则进行告警。支持配置延迟告警时间，建议值30s.',
        description: 'LNG/CNG车辆进行装卸作业，在车辆停稳10分钟内需在车辆前方放置警示牌'
      }, {
        type: '槽车装卸作业识别',
        logic: '在监控画面内绘制分析区域，区域内检测到槽车目标时，同时检测装卸管是否安插在车上，如果已经安装，则视为正在装卸作业，此时检测画面内是否有人，\n' +
          '如果在一定时间内均没有人出现，则进行告警。支持配置延迟告警时间，建议值30s',
        description: 'LNG/CNG车辆进行装卸作业，在车辆链接软管后，需在20分钟内工作人员至少一次出现在摄像头内，否则将会出发报警'
      }, {
        type: '未触摸静电球',
        logic: '在监控画面内，分别绘制出大门内侧和外侧的区域。实时检测画面中出现的人是否触摸静电球。人手与静电球的位置重叠，则视为已触摸。当有人从门外进入门内时，才进行判断。如果行走过程中如果没有触摸静电球，则产生告警',
        description: ''
      }, {
        type: '打电话',
        logic: '在监控画面内绘制分析区域，区域内检测出人体以及头部的位置，同时检测手机的位置，当手机的位置与头部有重叠时，并且在一定时间内持续重叠时，则进行告警。支持配置延迟告警时间，建议值3min',
        description: ''
      }, {
        type: '安全帽',
        logic: '在监控画面内绘制分析区域，区域内检测出人体以及头部的位置，同时检测头部是否佩戴了安全帽，如果在一定时间内均未佩戴，则进行告警。支持配置延迟告警时间，建议值3min',
        description: ''
      }, {
        type: '工作人员穿戴识别',
        logic: '在监控画面内绘制分析区域，区域内检测出人体以及衣着样式，当衣着样式不符合规定，并持续一定时间时，则进行告警。支持配置延迟告警时间，建议值3min',
        description: ''
      }, {
        type: '抽烟识别',
        logic: '在监控画面内绘制分析区域，区域内检测出人体的位置，同时检测烟的位置，当烟的位置位于人体附近，并且持续一定时间，则进行告警。支持配置延迟告警时间，建议值3min',
        description: ''
      }, {
        type: '烟雾检测',
        logic: '在监控画面内绘制分析区域，区域内检测出烟雾，并且持续一定时间，则进行告警。支持配置延迟告警时间，建议值3min',
        description: ''
      }, {
        type: '火焰检测',
        logic: '在监控画面内绘制分析区域，区域内检测出火焰，并且持续一定时间，则进行告警。支持配置延迟告警时间，建议值3min',
        description: ''
      }, {
        type: '人员聚集',
        logic: '在监控画面内绘制分析区域，区域内检测出人体目标并进行计数，当人数超过阈值并且持续一定时间，则进行告警。支持配置延迟告警时间，建议值10s',
        description: ''
      }, {
        type: '违规穿戴',
        logic: '在监控画面内绘制分析区域，区域内检测出人体以及衣着样式，当衣着样式不符合营业厅规定，并持续一定时间时，则进行告警。支持配置延迟告警时间，建议值30s',
        description: ''
      }, {
        type: '营业时间未开门',
        logic: '在监控画面内门口处绘制分析区域，区域内检测卷帘门的开关状态。在上班时间内，如果卷帘门未开启，并持续一定时间时，则进行告警。支持配置延迟告警时间，建议值30s',
        description: ''
      }, {
        type: '人员离岗',
        logic: '在监控画面内的办公区域处绘制分析区域，区域内检测人体目标。在上班时间内，如果区域内没人，并持续一定时间时，则进行告警。支持配置延迟告警时间，建议值10min',
        description: ''
      }, {
        type: '非营业时间有人员闯入',
        logic: '在监控画面内绘制分析区域，区域内检测出人体目标，在非营业时间，如果出现人体目标并且持续一定时间，则进行告警。支持配置延迟告警时间，建议值3min',
        description: ''
      }, {
        type: '工程车（挖机）作业识别',
        logic: '在监控画面内绘制分析区域，区域内检测出挖机，并且持续一定时间，则进行告警。支持配置延迟告警时间，建议值3min',
        description: ''
      }, {
        type: '消防通道堵塞',
        logic: '在监控画面内绘制出消防通道所在区域，区域内检测出目标物体，并且持续一定时间，则进行告警。支持配置延迟告警时间，建议值3min',
        description: ''
      }],
      btnSubmitDisabled: false,
      phoneForm: {
        dialogFormVisible: false,
        props: {
          phone: ''
        },
        rules: {
          phone: this.formRules({ required: true })
        }
      },
      passwordForm: {
        formDialog: false,
        props: {
          oldPassword: '',
          newPassword: '',
          newPasswordTwo: ''
        },
        rules: {
          oldPassword: this.formRules({ required: true }),
          newPassword: [{ required: true, trigger: 'blur', validator: passwordRule }],
          newPasswordTwo: this.formRules({ required: true })
        }
      }
    }
  },
  created() {
    this.getSystemInfoAndUserInfo();
  },
  methods: {
    getSystemInfoAndUserInfo() {
      this.listLoading = true
      request({
        url: '/system/sysUser/systemInfoAndUserInfo',
        method: 'get',
        data: {}
      }).then(res => {
        this.systemInfoAndUserInfo = res.data
      }, () => {

      })
    },
    save() {
      var _this = this;
      this.disableBtn(this, 'btnSubmitDisabled');
      this['$refs'].passwordForm.validate(function(valid) {
        if (!valid) {
          return;
        }
        if (_this.passwordForm.props.newPassword !== _this.passwordForm.props.newPasswordTwo) {
          _this.$message.error('确认密码输入有误');
          return;
        }
        _this.passwordForm.props.newPassword = encUtil.encodeRSA(_this.passwordForm.props.newPassword, null)
        _this.passwordForm.props.newPasswordTwo = encUtil.encodeRSA(_this.passwordForm.props.newPasswordTwo, null)
        _this.passwordForm.props.oldPassword = encUtil.encodeRSA(_this.passwordForm.props.oldPassword, null)
        request({
          url: '/system/sysUser/updatePassword',
          method: 'post',
          data: _this.passwordForm.props
        }).then(res => {
          _this.passwordForm.formDialog = false;
          _this.logout()
        })
      });
    },
    savePhone() {
      var _this = this;
      this.disableBtn(this, 'btnSubmitDisabled');
      this['$refs'].phoneForm.validate(function(valid) {
        if (!valid) {
          return;
        }
        request({
          url: '/system/sysUser/updatePhone',
          method: 'post',
          params: _this.phoneForm.props
        }).then(res => {
          _this.phoneForm.formDialog = false;
          _this.logout()
        })
      });
    },
    async logout() {
      await this.$store.dispatch('user/logout');
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    }
  }
}
</script>

<style scoped>
.td-lable{
  width:5% ;
  text-align:right;
  font-weight: 700;
}
.td-value{
  padding-left: 10px;
  width: 30%;
  color: #9a9a9a;
}
.title{
  font-size: 25px;
  font-weight: 700;
}
.gongdantitle{
  color: #9a9a9a;
}
</style>
